<template>
    <div class="container">
        <system-nav name="注册账户" :showBack="true"></system-nav>
        <div class="inner">
            <div class="system-form">
                <Form ref="form" :model="form" :rules="ruleValidate" :label-width="120">
                    <FormItem label="企业全称" prop="allName">
                        <Input v-model="form.allName" type="text" class="common-input" clearable placeholder="请输入企业全称" />
                    </FormItem>
                    <FormItem label="企业简称" prop="tenantName">
                        <Input v-model="form.tenantName" type="text" class="common-input" clearable placeholder="请输入企业简称" />
                    </FormItem>
                    <FormItem label="描述" prop="desc">
                        <Input v-model="form.desc" type="text" class="common-input" clearable placeholder="请输入描述" />
                    </FormItem>
                    <FormItem label="超级用户" prop="superName">
                        <Input v-model="form.superName" type="text" class="common-input" clearable placeholder="请输入超级用户" />
                    </FormItem>
                    <FormItem label="密码" prop="superPwd">
                        <Input type="password" v-model="form.superPwd" autocomplete="new-password" class="common-input" placeholder="请输入密码"></Input>
                    </FormItem>
                    <FormItem label="确认密码" prop="confirmPwd">
                        <Input type="password" v-model="form.confirmPwd" class="common-input" placeholder="请确认密码"></Input>
                    </FormItem>  
                    <FormItem label="联系人" prop="linkName">
                        <Input v-model="form.linkName" type="text" class="common-input" clearable placeholder="请输入联系人" />
                    </FormItem>
                    <FormItem label="手机号" prop="phone">
                        <Input v-model="form.phone" type="text" class="common-input" clearable placeholder="请输入手机号" />
                    </FormItem>
                    <FormItem label="邮箱" prop="email">
                        <Input v-model="form.email" type="text" class="common-input" clearable placeholder="请输入邮箱" />
                    </FormItem>
                    <FormItem label="日志网址">
                        <Input v-model="form.logUrl" type="text" class="common-input" clearable placeholder="请输入日志网址" />
                    </FormItem> 
                    <FormItem label="网址">
                        <Input v-model="form.bjUrl" type="text" class="common-input" clearable placeholder="请输入网址" />
                    </FormItem>
                    <FormItem>
                        <Button type="primary" class="margin-right-25" @click="handleSubmit('form')">提交</Button>
                        <Button type="primary" @click="goBack" ghost>返回</Button>
                    </FormItem>
                </Form>
            </div>
        </div>
    </div>
</template>

<script>
import { mapGetters } from 'vuex'
import SystemNav from '@/components/SystemNav'
import mixin from '@/mixins'
import { registerRest } from '@/common/apis/system'
import validator from '@/common/utils/validator'

export default {
    name: 'accountRegister',
    mixins: [mixin],
    components: {
        SystemNav
    },
    data() {
        const validatePass = (rule, value, callback) => {
            if(value) {
                if (this.form.newPwd !== '') {
                    this.$refs.form.validateField('confirmPwd')
                } 
                callback()
            }
        }
        const validatePassCheck = (rule, value, callback) => {
            if (value && value !== this.form.superPwd) {
                callback(new Error('确认密码与密码不一致'))
            } else {
                callback()
            }
        }
        return {
            form: {
                allName: '',
                tenantName: '',
                desc: '',
                superName: '',
                superPwd: '',
                confirmPwd: '',
                linkName: '',
                phone: '',
                email: '',
                logUrl: '',
                bjUrl: ''
            },
            ruleValidate: {
                allName: [
                    { required: true, message: '企业全称不能为空', trigger: 'blur' }
                ],
                tenantName: [
                    { required: true, message: '企业简称不能为空', trigger: 'blur' }
                ],
                desc: [
                    { required: true, message: '描述不能为空', trigger: 'blur' }
                ],
                superName: [
                    { required: true, message: '超级用户不能为空', trigger: 'blur' }
                ],
                superPwd: [
                    { required: true, message: '密码不能为空', trigger: 'blur' },
                    { validator: validatePass, trigger: 'blur' }
                ],
                confirmPwd: [
                    { required: true, message: '确认密码不能为空', trigger: 'blur' },
                    { validator: validatePassCheck, trigger: 'blur' }
                ],
                linkName: [
                    { required: true, message: '联系人不能为空', trigger: 'blur' }
                ],
                phone: [
                    { required: true, validator: validator.validateMobile, trigger: 'blur' }
                ],
                email: [
                    { required: true, message: '邮箱不能为空', trigger: 'blur' },
                    { type: 'email', message: '请输入正确的邮箱', trigger: 'blur' }
                ]
            }
        }
    },
    mounted() {

    },
    methods: {
        handleSubmit(name) {
            this.$refs[name].validate(valid => {
                if (valid) {
                    const { confirmPwd, ...params } = this.form
                    registerRest(params).then(result => {
                        if (result.data.code === 200) {
                            this.$Message.success({
                                background: true,
                                content: '注册成功'
                            })                         
                            this.goBack()
                        } else {
                            this.reset()
                            this.$Message.error({
                                background: true,
                                content: '注册失败'
                            })
                        }
                    })
                }
            })
        },
        reset() {
            this.$refs.form.resetFields()
        }
    }
}
</script>
